<template>
  <div>
    <h1>声明周期{{ state.count }}</h1>
    <div v-if="state.show">
      <Test/>
    </div>
  </div>
</template>
<script>
//子组件，用于测试onBeforeUnmount组件销毁时的生命周期钩子函数
import Test from './TestSon.vue'
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, reactive} from 'vue'
export default{
  components: {
    Test
  },
  setup(){
    const state = reactive({
      count: 0,
      show: true
    })
    //2秒后隐藏子组件，测试组件被销毁时的声明周期钩子
    setTimeout(() => {
      state.count = 2
      state.show =false
    }, 2000)

    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(()=>{
      console.log('onUnmounted')
    })
    onErrorCaptured(()=>{
      console.log('onErrorCaptured')
    })
    return {
      state
    }
  }
}
</script>